<template>
  <div>
    <h1>商品管理</h1>
    <div style="width: 90%; display: flex; flex-direction: row; justify-content: space-between; margin: 20px;">
      <el-button type="success" @click="dialogFormVisible = true">新增商品</el-button>
      <el-button type="success" @click="dialogFormVisibleForNewItem = true">下架商品</el-button>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: flex-start; ">
      <el-button>
        <router-link target="_blank" :to="{path:'/echartstest'}">图表展示</router-link>
      </el-button>
    </div>


    <!-- 表格 -->
    <MyTable1 ref="myTable1" :params="tables"></MyTable1>
    <!-- 弹出框 -->
    <el-dialog title="上架商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/file/uploader"
            :show-file-list="false"
            :on-success="uploaderSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" placeholder="请给商品编号"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off" placeholder="请给商品设置单价"></el-input>
        </el-form-item>
        <el-form-item label="是否要上架" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off" placeholder="如果要上架请输入 上架"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertNews()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- --------------下架--弹出-------------- -->
    <!-- 弹出框 -->
    <el-dialog title="下架商品" :visible.sync="dialogFormVisibleForNewItem">
      <el-form :model="form">
        <el-form-item label="请输入商品id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" placeholder="按商品编号操作"></el-input>
        </el-form-item>
        <el-form-item label="请选择上下架" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off" placeholder="上架 : 下架"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入商品名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleForNewItem = false">取 消</el-button>
        <el-button type="primary" @click="insertType()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyTable1 from "./MyTable1"

export default {
  components: {
    MyTable1
  },
  data() {
    return {
      //弹出框的属性
      dialogFormVisible: false,
      dialogFormVisibleForNewItem: false,
      formLabelWidth: '120px',
      //图片的url
      imageUrl: null,
      //表单数据
      form: {
        id: null,
        name: null,
        // time: null,
        image: null,
        // price: null,
        state: null
      },
      //表格组件需要的参数对象
      tables: {
        //表头数组
        cols: [
          {prop: "id", label: "商品编号"},
          {prop: "name", label: "商品名称"},
          {prop: "image", label: "商品图片", type: "img"},
          {prop: "price", label: "价格"},
          {prop: "time", label: "发布时间"},
          {
            prop: "state", label: "发布状态",
            formatter: (row) => (row.state === 1 ? "上架" : "已下架")
          },

        ],
        //请求的参数
        request: {
          //表格请求的url
          url: "/newsInfo/list1",
          //请求的数据
          data: this.search
        }
      }
    }
  },
  methods: {
    //上架商品
    insertNews() {
      this.$.ajax({
        type: "POST",
        url: "/newsInfo/insert",
        data: this.form,
        success: (result) => {
          console.log("新增成功....");
          //刷新表格
          this.$refs.myTable1.requestList();
          //关闭弹窗
          this.dialogFormVisible = false;
        }
      })
    },
    //下架商品
    insertType() {
      this.$.ajax({
        type: "POST",
        url: "/newsInfo/update",
        data: this.form,
        success: (result) => {
          formatter: (result) => (result.state === 1 ? "上架" : "已下架"),
            console.log("下架商品....");
          //刷新表格
          this.$refs.myTable1.requestList();
          //关闭弹窗
          this.dialogFormVisibleForNewItem = false;
        }
      });
    },
    //生成成功的回调方法
    uploaderSuccess(resp) {
      console.log("上传结果...", resp);
      this.form.image = resp.data;
      //图片回显
      this.imageUrl = this.$.getImg(this.form.image);
    },
  }

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
